import React, { useEffect, useState } from 'react'
import {
    Form,
    Input,
    Button,
    Toast
} from 'antd-mobile'
import { userLogin, getUserCaptcha } from '../../request/index';
import { useNavigate } from 'react-router-dom';
import aaa from "../../assets/images/login.jpg"
import "./login.scss"
type forLogin = {
    tel: string,
    code: string
}
function Login() {
    // 定义变量获取Form组件的实例对象
    const [btnText, setBtnText] = useState("获取验证码")
    const [form] = Form.useForm();
    const getCode = () => {
        console.log(form.getFieldsValue(true))
        // 验证手机号
        const { tel } = form.getFieldsValue(true)
        console.log(tel)
        //按钮开启倒计时
        setBtnText('60s')
        // 获取验证码
        getUserCaptcha(tel).then(resp => {
            console.log(resp)
            Toast.show({
                content: '验证码获取成功',
                icon: 'success',
                afterClose: () => {
                    form.setFieldValue('code', resp.data.data)
                },
            })
        })
    }
    useEffect(() => {
        const timer = setInterval(() => {
            if (btnText === '获取验证码') {
                clearTimeout(timer)
            }
            else {
                let num = parseInt(btnText)
                num--
                setBtnText(num + 's')
                if (num === 0) {
                    setBtnText('获取验证码')
                    clearTimeout(timer)
                }
            }
        }, 1000)
        return () => {
            clearTimeout(timer)
        }
    }, [btnText])
    //登录
    let navigate = useNavigate()
    const onLogin = (values: forLogin) => {
        console.log(values)
        userLogin(values).then(resp => {
            if (resp.data.code === 200) {
                Toast.show({
                    content: '登录成功',
                    icon: 'success',
                    afterClose: () => {
                        localStorage.setItem("token", resp.data.data.token)
                        navigate('/')
                    },
                })
            }
        })
    }
    return (
        <div className='box'>
            <div className='login'>
                <img src={aaa} alt="" />
                <h3>手机号码登录</h3>
            </div>
            <Form
                style={{ padding: "10px" }}
                form={form}
                layout='horizontal'
                onFinish={onLogin}
                footer={
                    <Button style={{ backgroundColor: "#ff6262", border: 'none' }} block type='submit' color='primary' size='large'>
                        登录
                    </Button>
                }
            >
                <Form.Item
                    name='tel'
                    label='手机号'
                    rules={[{ required: true, message: '手机号不能为空' },
                    { pattern: /^1[3-9]\d{9}/, message: "手机号格式不正确" }
                    ]}
                >
                    <Input placeholder='请输入手机号' />
                </Form.Item>
                <Form.Item name="code" rules={[{ required: true, message: '验证码不能为空' }]} extra={<span onClick={getCode}>{btnText}</span>} >
                    <Input placeholder='请输入验证码' />
                </Form.Item>
            </Form>
        </div>
    )
}

export default Login

// import React, { useEffect, useState } from 'react'
// import { login, getTelCode } from '../../request/index'
// import {
//     Form,
//     Input,
//     Button,
//     Toast
// } from 'antd-mobile'
// type getLoginData = {
//     tel: string,
//     code: string
// }
// import { useNavigate } from 'react-router-dom'
// function Login() {
//     const [form] = Form.useForm()
//     const getCode = () => {
//         //验证手机号
//         const { tel } = form.getFieldValue(true)
//         // 获取验证码
//         getTelCode(tel).then(resp => {
//             console.log(resp)
//             Toast.show({
//                 content: '验证码获取成功',
//                 icon: 'success',
//                 afterClose: () => {
//                     form.setFieldValue('code', resp.data.data)
//                 },
//             })
//         })
//     }
//     let navigate = useNavigate()
//     const onLogin = (values: getLoginData) => {
//         console.log(values)
//         login(values).then(resp => {
//             if (resp.data.code === 200) {
//                 console.log(666, resp)
//                 Toast.show({
//                     content: '登录成功',
//                     icon: 'success',
//                     afterClose: () => {
//                         localStorage.setItem("token", resp.data.data.token)
//                         navigate('/')
//                     },
//                 })
//             }
//         })
//     }
//     return (
//         <div>
//             <Form
//                 form={form}
//                 layout='horizontal'
//                 onFinish={onLogin}
//                 footer={
//                     <Button block type='submit' color='primary' size='large'>
//                         登录
//                     </Button>
//                 }
//             >
//                 <Form.Item
//                     name='tel'
//                     label='手机号'
//                     rules={[{ required: true, message: '手机号不能为空' },
//                     { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确" }
//                     ]}
//                 >
//                     <Input onChange={console.log} placeholder='请输入手机号' />
//                 </Form.Item>
//                 <Form.Item name='yzm' extra={<span onClick={getCode}>获取验证码</span>}>
//                     <Input placeholder='请输入验证码' />
//                 </Form.Item>
//             </Form>
//         </div>
//     )
// }

// export default Login
